/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-06-29 18:54:28
 * @LastEditTime: 2022-07-06 19:49:49
 */

import { useEffect } from 'react';
import { Form, FormInstance, Input, InputNumber, Radio, Space, Typography } from 'antd';
import { IMetadata } from '@/interfaces/metadata';
import { useFolderTreeContext } from '../../../../contexts/FolderTreeContext';
import { IRuleConfig } from '@/api/floderTree';

const { Paragraph, Text } = Typography;

interface IGeneralSettingProps {
  form: FormInstance;
  field: IMetadata;
  type: number;
  onClose: any;
}

const GeneralSetting = (props: IGeneralSettingProps) => {
  const { form, field, type, onClose } = props;
  const { groupPlanAddProp } = useFolderTreeContext();

  useEffect(() => {
    if (type) {
      form.setFieldsValue({ ruleType: type });
    }
  }, [type]);

  /**
   * @description: 提交表单方法
   * @param {*} vals 表单数据
   */
  const onFinish = (vals: any) => {
    const ruleConfig: IRuleConfig = { ruleType: vals.ruleType };
    if (vals.ruleType === 2) {
      ruleConfig.manualValueRule = vals.manualValue.split(/[,，]/);
    } else {
      ruleConfig.valueRangeRule =
        !vals.valueRangeFirst && !vals.valueRangeLast
          ? []
          : [vals.valueRangeFirst, vals.valueRangeLast];
    }
    groupPlanAddProp(field, 'ruleConfig', ruleConfig);
    groupPlanAddProp(field, 'configRule', true);
    onClose();
  };

  return (
    <>
      <Paragraph>
        <Text strong>字段：</Text>
        {field.field_desc}（请按照字段属性选择合适的值域设定方法）
      </Paragraph>
      <Form form={form} onFinish={onFinish}>
        <Form.Item name="ruleType">
          <Radio.Group>
            <Radio.Button value={2}>手动设定值域</Radio.Button>
            <Radio.Button value={3}>数值范围设定</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) => prevValues.ruleType !== curValues.ruleType}
        >
          {({ getFieldValue }) => {
            return (
              <>
                {getFieldValue('ruleType') === 2 && (
                  <Form.Item
                    name="manualValue"
                    extra="请手动输入字段值域，多字段按“,”隔开。系统将匹配字段值与值域，匹配成功的将自动在目录树上展示"
                  >
                    <Input.TextArea
                      placeholder="请手动输入字段值域，多字段按“、‘隔开。"
                      allowClear
                    />
                  </Form.Item>
                )}
                {getFieldValue('ruleType') === 3 && (
                  <Form.Item
                    label="值域起止范围"
                    extra="系统将判断字段值是否在数值起止范围内，范围内的字段值将自动在目录树上展示"
                  >
                    <Space>
                      <Form.Item name="valueRangeFirst" noStyle>
                        <InputNumber />
                      </Form.Item>
                      <span>到</span>
                      <Form.Item name="valueRangeLast" noStyle>
                        <InputNumber />
                      </Form.Item>
                    </Space>
                  </Form.Item>
                )}
              </>
            );
          }}
        </Form.Item>
      </Form>
    </>
  );
};

export default GeneralSetting;
